<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<%@taglib uri="/authtaglib" prefix="auth" %>
<div id="cc" class="easyui-layout" style="height:500px;">
    <div data-options="region:'west',title:'可选择人员',split:true" style="width:350px;">
        <table id="datagrid"></table>
    </div>
    <div data-options="region:'center',title:'已选人员',split:true">
        <table id="datagrid1"></table>
    </div>
</div>

<script type="text/javascript">
    //页面加载完后响应 onReady
    //初始化主列表
    $('#datagrid').datagrid({
        url: '${pageContext.request.contextPath}/cnbdw/employeeAction!getAllDatasourceList.action',
        fit: true,
        border: false,
        fitColumns: true,
        pagination: true,
        height: 500,
        pageList: [10, 20, 30],
        rownumbers: false,
        sortName: 'id',
        sortOrder: 'desc',
        striped: true,
        columns: [
            [
                {field: 'ck', checkbox: true},
                {field: 'id', title: '唯一编号', align: 'left', hidden: true, formatter: function (value, rowData, rowIndex) {
                    if (value == '') {
                        return '--'
                    }
                    return value;
                }},
                {field: 'name', title: '姓名', align: 'left', formatter: function (value, rowData, rowIndex) {
                    if (value == '') {
                        return '--'
                    }
                    return value;
                }},
                //{field: 'namePy', title: 'namePy', align: 'left', formatter: function (value, rowData, rowIndex) {if (value == '') {return '--'} return value;}},
                {field: 'gender', title: '性别', align: 'left', formatter: function (value, rowData, rowIndex) {
                    if (value == 1) {
                        return '男'
                    } else {
                        return '女'
                    }
                    return value;
                }},
//                 {field: 'photo', title: '照片', align: 'left', formatter: function (value, rowData, rowIndex) {
//                     if ($.trim(value) != '') {
//                         return '<img src="${pageContext.request.contextPath}' + value + '" style="width: 30px; height: 30px;">';
//                     }
//                     return '--';
//                 }},
                {field: 'cardNo', title: '卡片号码', align: 'left', formatter: function (value, rowData, rowIndex) {
                    if (value == '') {
                        return '--'
                    }
                    return value;
                }}
            ]
        ],
        onSelect: function (index, item) {
            $('#datagrid1').datagrid('appendRow', {
                id: item.id,
                name: item.name,
                gender: item.gender,
                photo: item.photo,
                cardNo: item.cardNo
            });

            $('#datagrid1').datagrid('checkAll');
        },
        onUnselect: function (ix, row) {
            var rows = $('#datagrid1').datagrid('getRows');
            $.each(rows, function (index, item) {
                if (item.id == row.id) {
                    $('#datagrid1').datagrid('deleteRow', index);
                }
            });
        },
        onSelectAll: function (rows) {
            $.each(rows, function (index, item) {
                $('#datagrid1').datagrid('appendRow', {
                    id: item.id,
                    name: item.name,
                    gender: item.gender,
                    photo: item.photo,
                    cardNo: item.cardNo
                });
            });
            $('#datagrid1').datagrid('checkAll');
        },
        onUnselectAll: function (rows) {
            $.each(rows, function (ix, item) {
                var getRows = $('#datagrid1').datagrid('getRows');
                $.each(getRows, function (index, row) {
                    console.info(item);
                    console.info(row);

                    if (item.id == row.id) {
                        $('#datagrid1').datagrid('deleteRow', index);
                    }
                });
            });
        }
    });

    $('#datagrid1').datagrid({
        fit: true,
        border: false,
        fitColumns: true,
        height: 500,
        rownumbers: false,
        sortName: 'id',
        sortOrder: 'desc',
        striped: true,
        columns: [
            [
                {field: 'ck', checkbox: true},
                {field: 'id', title: '唯一编号', align: 'left', hidden: true, formatter: function (value, rowData, rowIndex) {
                    if (value == '') {
                        return '--'
                    }
                    return value;
                }},
                {field: 'name', title: '姓名', align: 'left', formatter: function (value, rowData, rowIndex) {
                    if (value == '') {
                        return '--'
                    }
                    return value;
                }},
                //{field: 'namePy', title: 'namePy', align: 'left', formatter: function (value, rowData, rowIndex) {if (value == '') {return '--'} return value;}},
                {field: 'gender', title: '性别', align: 'left', formatter: function (value, rowData, rowIndex) {
                    if (value == 1) {
                        return '男'
                    } else {
                        return '女'
                    }
                    return value;
                }},
                {field: 'photo', title: '照片', align: 'left', formatter: function (value, rowData, rowIndex) {
                    if ($.trim(value) != '') {
                        return '<img src="${pageContext.request.contextPath}' + value + '" style="width: 30px; height: 30px;">';
                    }
                    return '--';
                }},
                {field: 'cardNo', title: '卡片号码', align: 'left', formatter: function (value, rowData, rowIndex) {
                    if (value == '') {
                        return '--'
                    }
                    return value;
                }}
            ]
        ],
        onSelect: function (index, row) {

        },
        onUnselect: function (index, row) {

        },
        onSelectAll: function (rows) {

        },
        onUnselectAll: function (rows) {

        }
    });
</script>

